import React from 'react';
import Input from "../../../Component/Input/Input";
import {Row,  Icon} from "antd";
import Logo from '../../../Common/svg/Logo';
import RoundButton from "../../../Component/RoundButton/RoundButton";
import "../Common/index.css";
import LoginLock from '../../../Common/svg/LoginLock';
import Blank from '../../Blank';
import "../../../Common/css/common.css";
import "./index.css";
import User from "../../../Server/User";
import CheckUtil from "../../../utils/CheckUtil";
import UserCheck from '../../../utils/UserCheck';

export default class ChangePsw extends React.Component {
    constructor(props){
      super();
      this.state = {
        passWordOld:"",//原密码
        passWordNew:"",//新密码
        passWordNewTwo:"",//再次输入新密码
      };
    }
    
    ClearErr(){
      this.setState({
          err:""
      });
    }
    SetErr(value){
        this.setState({
            err:value
        });
    }
    ChangePass(e){
      this.ClearErr();
      let passWordOld = this.state.passWordOld;
      let passWordNew = this.state.passWordNew;
      let passWordNewTwo = this.state.passWordNewTwo;
      let checkPsw=CheckUtil.CheckPsw(this.state.passWordNew,this.state.passWordNewTwo);
      if(passWordOld==="")
      {
        this.SetErr("请输入原登陆密码");
        return false;
      }
      if(passWordNew==="")
      {
        this.SetErr("请输入新密码");
        return false;
      }
      if(passWordNewTwo==="")
      {
        this.SetErr("请再次确认新密码");
        return false;
      }
      if(checkPsw===false){
        this.SetErr("密码不符合要求");
        return false;
      }
      User.UpdateLoginPassword(
        UserCheck.GetUserID(),this.state.passWordOld,this.state.passWordNew,this.state.passWordNewTwo)
      .then(resonse=>{
          var data = {
            name: 'ChangePswModelSuccess',
          }
          window.parent.postMessage(data);
      },reject=>{
        this.SetErr(reject.msg);
    })
    }
  
    
      render() {
        return (
            <div>
                <div className="Modal_Content_Out">
                <div>
                    <Logo width="133" height="99"/>
                </div>
                <Row className="Modal_Content_Phone">
                    <Input
                        type={"plain"}
                        placeholder={"请输入原登录密码"}
                        prefix={<Icon component={LoginLock}/>}
                        autoComplete={"username"}
                        value={this.state.passWordOld}
                        onChange={e=>this.setState({passWordOld:e.target.value})}
                    />
                    <div className="ChangePsw_Info">
                        <span className="ChangePsw_Info_Star">*</span>
                        <span>6-20个字符，必须包含字母和数字</span>
                    </div>
                </Row>
                <Row className="Modal_Content_Phone">
                    <Input
                        type={"plain"}
                        placeholder={"请输入新密码"}
                        prefix={<Icon component={LoginLock}/>}
                        autoComplete={"username"}
                        value={this.state.passWordNew}
                        onChange={e=>this.setState({passWordNew:e.target.value})}
                    />
                </Row>
                <Row className="Modal_Content_Phone">
                    <Input
                        type={"plain"}
                        placeholder={"再次确认新密码"}
                        prefix={<Icon component={LoginLock}/>}
                        autoComplete={"username"}
                        value={this.state.passWordNewTwo}
                        onChange={e=>this.setState({passWordNewTwo:e.target.value})}
                    />
                </Row>
                <div className="flexContainer">
                    <Blank/>
                    <span style={{marginTop:"5px"}}><font color="#5393EB"><a href="/forgetPsw">忘记密码？</a></font></span>
                </div>
                <div>
                  <font color="red">{this.state.err}</font>
                </div>
                <Row className={"Login_Button"} onClick={e=>this.ChangePass(e)}>
                    <RoundButton text={"确定提交"}/>
                </Row>
                
              </div>
            </div>
        );
      }
  }